// import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';  
import React,{Component} from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom'; 
import { Pagination, Icon } from 'antd-mobile';
import './../css/button.css';
import { List, Checkbox, Flex } from 'antd-mobile';
import Dates from'./dates.js';
import Header from"./header.js";
import Home from"./redux/home.js";
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;
const data = [
    { value: 0, label: '单程' },
    { value: 1, label: '往返' },
    // { value: 2, label: '多程' },
  ];
const menu=[
    {key:'01',title:'中国'},
    {key:'02',title:'日本'},
    {key:'03',title:'韩国'},
    {key:'04',title:"泰国"}
]
class Butn extends Component{
    constructor(props){
        super(props);
        this.state={
            add:true,
            remove:false,
            changeMenu:true
        }
        this.data={
            arry:[],
            menuString:'0'
        }
        this.changeFn=this.changeFn.bind(this);
        this.addclick=this.addclick.bind(this);
        this.removeclick=this.removeclick.bind(this);
        this.change=this.change.bind(this);
    }
    change(e){
        console.dir(e.target.dataset.seed);
    
    }
    changeFn(evt){
        this.menuString=evt.currentTarget.dataset.id
        this.setState({
            changeMenu:false
        })
    }
    addclick(){
        this.data.arry.push(<input placeholder="请输入内容"/>)
        this.setState({
            add:false
        })
    }
    removeclick(){
        this.data.arry.shift(0);
        this.setState({
            remove:true
        })
    }
    componentWillMount(){

    }
    render(){
        let addlist
       
        if(!this.state.add){
            addlist=this.data.arry.map((value,index)=>{ 
                return <div> {value}</div>
            })
        }
        let menuList 
        let fontStyle
        menuList=menu.map((vla,index)=>{
            if(this.menuString==index){
                fontStyle={
                    background: '#479ee5',
                    color: '#fff'
                }
            }
            return <li style={fontStyle} key={index} onClick={this.changeFn} data-id={index}>{vla.title}</li>
        })
       return (<div className='button-conent'>
        <div className='button-box'>
            <div className='box'>
                <input type='text' placeholder="请输入内容"/>
                <button onClick={this.addclick} style={{width:'100px',textAlign:'conent'}}>+</button>
                <button onClick={this.removeclick} style={{width:'100px' ,textAlign:'conent'}}>-</button>
            </div>
           <Header/>
            <Link to='./dates'>跳转日历页面</Link>
            {/* <ul className="menu-box">
                {menuList}
            </ul> */}
            {addlist}
            <Home/>
            
        </div>
        {/* <Dates/> */}
       {/* <div className='date'>
           <Link to='./dates'>跳转日历页面</Link>
       </div> */}

      </div>);
        
    }
}

export default Butn;